<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D柱状图</title>
    <base href="/">
    <link rel="SHORTCUT ICON" href="../static/img/icon.png">
    <link rel="stylesheet" type="text/css" href="../static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/dataAdmin.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/main_dataAnalysis.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/dataAnalysis.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/footer.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="../static/js/public.js"></script>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

    <style>
        .data_input {
            background-color: #D9D9D9;
            height: 150px;
        }

        .chart_display {
            margin-top: 7px;
            background-color: #f2f2f2;
            height: 500px;
        }

        .input_data {
            background-color: #c4c4c4;
            width: 700px;
            height: 40px;
            margin-top: 5px;
            margin-left: 40px;
            line-height: 40px;
        }

        .input_data input {
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 4px 14px;
            font-size: 12px;
            width: 180px;
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }


        body {
            background: #F6F8FA;
        }


        .nav {
            background-color: #a5aca4;
            height: 80px;
            width: 1330px;
            margin-left: 5px;
            margin-right: 5px;

        }

        .footer {
            width: 1330px;
            background-color: #34495e;
            margin-top: 810px;
            height: 80px;
            margin-left: 7px;
            margin-bottom: 5px;
        }

        .logo {
            width: 250px;
            height: 80px;
            background-color: #aee6a6;
            margin-left: 10px;
        }

        .logo img {
            width: 250px;
            height: 80px;
        }

        .chart {
            margin-left: 10px;
            margin-top: 10px;
            font-size: 18px;
        }

        .left {
            background-color: #34495e;
            height: 800px;
            width: 265px;
            float: left;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 7px;
        }

        #3D_bar {
            margin-left: 140px;
        }
    </style>
</head>
<body>
<div class="container" id="container" style="">
    <!--nav-->
    <div class="nav">
        <div class="logo">
            <img src="../static/img/logo.jpg">
        </div>
    </div>
    <nav>
        <!--导航条-->
        <ul class="nav-main">
            <li><a href="">首页</a></li>
            <li id="li-1">在线数据分析<span></span></li>
            <li id="li-2">数据社区<span></span></li>
            <li id="li-3">数据可视化<span></span></li>
            <li><a href="/analysis_case/">案例展示</a></li>
            <li><a href="/contact/">联系我们</a></li>
            <li><a href="/help/">帮助中心</a></li>
        </ul>
        <!--隐藏盒子-->
        <div id="box-1" class="hidden-box hidden-loc-index">
            <ul>
                <li><a href="/analysis/">数据分析</a></li>
            </ul>
        </div>
        <div id="box-2" class="hidden-box hidden-loc-us">
            <ul>
                <li><a href="/codeopen/">代码开源</a></li>
                <li><a href="/datanews/">数据分析资讯</a></li>
            </ul>
        </div>
        <div id="box-3" class="hidden-box hidden-loc-info">
            <ul>
                <li><a href="/visualization/bar/">数据可视化</a></li>
            </ul>
        </div>
    </nav>
    <div class="left">
        <div class="menu" id="menu">
            <div class="wrap">
                <div class="header_menu">Python数据可视化</div>
                <div class="nav1">
                    <ul>
                        <li class="list">
                            <h2><i></i>直角坐标系图表</h2>
                            <div class="hide">
                                <a href="/visualization/bar/"><h5>柱状图</h5></a>
                                <a href="/visualization/box/"><h5>箱型图</h5></a>
                                <a href="/visualization/k_chart/"><h5>K线图</h5></a>
                                <a href="/visualization/pie/"><h5>面积图</h5></a>
                                <a href="/visualization/scatter/"><h5>散点图</h5></a>
                                <a href="/visualization/line/"><h5>折线图</h5></a>
                            </div>
                        </li>
                        <li class="list">
                            <h2><i></i>基本图表</h2>
                            <div class="hide">
                                <a href="/visualization/funnel/"><h5>漏斗图</h5></a>
                                {#                                <a href="/visualization/bar/"><h5>关系图</h5></a>#}
                                <a href="/visualization/pie/"><h5>饼图</h5></a>
                                <a href="/visualization/radar/"><h5>雷达图</h5></a>
                                <a href="/visualization/wordCloud/"><h5>词云图</h5></a>
                                <a href="/visualization/calendar/"><h5>日历图</h5></a>
                            </div>
                        </li>

                        <li class="list">
                            <h2><i></i>3D图表</h2>
                            <div class="hide">
                                <a href="/visualization/threeD_bar/"><h5>3D柱状图</h5></a>
                                <a href="/visualization/threeD_Line/"><h5>3D折线图</h5></a>
                                <a href="/visualization/threeD_scatter/"><h5>3D散点图</h5></a>
                            </div>
                        </li>
                        <li class="list">
                            <h2><i></i>树形图表</h2>
                            <div class="hide">
                                <a href="/visualization/bar/"><h5>树图</h5></a>
                                <a href="/visualization/bar/"><h5>矩形树图</h5></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="content1" id="content1">
        <div class="data_input">
            <form action="/demo/threeD_bar/" method="post">
                {% csrf_token %}
                {#            <div class="import_data"></div>#}
                <div class="input_data">
                    <table border="1" cellpadding="0" cellspacing="0" style="margin: auto">
                        <tr>
                            <td>输入标题&nbsp;&nbsp;</td>
                            <td><input type="text" placeholder="请输入标题" name="bar_title"></td>
                            <td>输入副标题&nbsp;&nbsp;</td>
                            <td><input type="text" placeholder="请输入副标题" name="x_title"></td>
                        </tr>
                        <tr>
                            <td>输入x轴&nbsp;&nbsp;</td>
                            <td><input type="text" placeholder="请输入x轴数据,以逗号隔开" name="x_values"></td>
                            <td>输入y轴&nbsp;&nbsp;</td>
                            <td><input type="text" placeholder="请输入y轴数据,以逗号隔开" name="y_values"></td>
                        </tr>
                        <tr>
                            <td>导入CSV数据</td>
                            <td>
                                <input type="file" name="import_csv">
                            </td>
                            <td>

                            </td>
                            <td>
                                {#                                <button class="button" name="create_chart">创建图表</button>#}
                                <input type="submit" name="create_chart">
                            </td>
                        </tr>
                    </table>
                </div>
                {#            <div class="create_charts">#}
                {##}
                {##}
                {#            </div>#}
            </form>
        </div>
        <div class="chart_display">
            <div class="chart">
                <div id="3D_bar" style="width:700px; height:500px;">
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <footer style="border-top: 1px solid ; background-repeat: repeat;"
                class="footer">
            <div class="footer-inner">
                <div class="fooert copyright" align="center">
                    <a href="##" target="_blank">友情链接：</a>
                    <a href="https://www.django.cn/" target="_blank">Django中文网</a>
                    | <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
                    | <a href="http://pyecharts.org/#/zh-cn/" target="_blank">pyecharts</a> |
                    <a href="http://sc.chinaz.com/tag_jiaoben/tupianlunbo.html" rel="sitemap">站长素材</a>
                    | <a href="##" target="_blank">联系我们</a>
                    <p><a href="/" title="dry">dry</a> 版权所有，保留一切权利 ! <a href="https://www.kkkuu.cn/">首页</a> © 2019-2020
                        ·
                        黔ICP备00000000号</p>
                </div>
        </footer>
    </div>

</div>
<script>
    (function () {
        var oList = document.querySelectorAll('.list h2'),
            oHide = document.querySelectorAll('.hide'),
            oIcon = document.querySelectorAll('.list i'),
            lastIndex = 0;
        for (var i = 0; i < oList.length; i++) {
            oList[i].index = i;//自定义属性
            oList[i].isClick = false;
            oList[i].initHeight = oHide[i].clientHeight;
            oHide[i].style.height = '0';
            oList[i].onclick = function () {
                if (this.isClick) {
                    oHide[this.index].style.height = '0';
                    oIcon[this.index].className = '';
                    oList[this.index].className = '';
                    oList[this.index].isClick = false;
                } else {
                    oHide[lastIndex].style.height = '0';
                    oIcon[lastIndex].className = '';
                    oList[lastIndex].className = '';
                    oHide[this.index].style.height = '220px';
                    oIcon[this.index].className = 'on';
                    oList[this.index].className = 'on';
                    oList[lastIndex].isClick = false;
                    oList[this.index].isClick = true;
                    lastIndex = this.index;
                }
            }
        }
    })();

</script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('3D_bar'));


    var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
        '7a', '8a', '9a', '10a', '11a',
        '12p', '1p', '2p', '3p', '4p', '5p',
        '6p', '7p', '8p', '9p', '10p', '11p'];
    var days = ['Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

    var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
    option = {
        tooltip: {},
        visualMap: {
            max: 20,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            }
        },
        xAxis3D: {
            type: 'category',
            data: hours
        },
        yAxis3D: {
            type: 'category',
            data: days
        },
        zAxis3D: {
            type: 'value'
        },
        grid3D: {
            boxWidth: 200,
            boxDepth: 80,
            viewControl: {
                // projection: 'orthographic'
            },
            light: {
                main: {
                    intensity: 1.2,
                    shadow: true
                },
                ambient: {
                    intensity: 0.3
                }
            }
        },
        series: [{
            type: 'bar3D',
            data: data.map(function (item) {
                return {
                    value: [item[1], item[0], item[2]],
                }
            }),
            shading: 'lambert',

            label: {
                textStyle: {
                    fontSize: 16,
                    borderWidth: 1
                }
            },

            emphasis: {
                label: {
                    textStyle: {
                        fontSize: 20,
                        color: '#900'
                    }
                },
                itemStyle: {
                    color: '#900'
                }
            }
        }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
<script src="../static/js/index.js"></script>
</body>
</html>